<template>
	<view class="comment-box">
		<h5 style="
        margin: 24rpx 0 24rpx 10rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #2a0c00;
      ">
			楼栋基本信息
		</h5>
		<view class="cord">
			<view>
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<!-- 房屋类型 -->
					<u-form-item labelAlign="right" prop="userInfo.type" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								房屋类型
								<span style="color: red">*</span>
							</span>
							<u-radio-group placement="row" v-model="radiovalue1">
								<view style="display: flex; justify-content: end; width: 100%">
									<u-radio activeColor="#fe4f04" :customStyle="{ marginLeft: '15rpx' }"
										v-for="(item, index) in radiolist1" :key="index" :label="item.name"
										:name="item.name" @change="radioChange(item.id, 1)"></u-radio>
								</view>
							</u-radio-group>
						</view>
					</u-form-item>
					<!-- 家具 -->
					<!-- <u-form-item prop="userInfo.sex" borderBottom @click=" hideKeyboard()" ref="item1">
						<view class="box-flex">
							<span style="margin-right:  10rpx">家具<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item> -->
					<!-- 网络-->
					<!-- / @click="hideKeyboard(4)" -->
					<u-form-item prop="userInfo.facilities" borderBottom ref="item1" @click="hideKeyboard(4)">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								房源设施
								<span style="color: red">*</span>
							</span>
							<view style="display: flex">
								<!-- <selectCheckbox style="width: auto;" v-model="facilities" collapse-tags :collapse-tags-num="3" multiple dataKey="label"
					dataValue="value" :localdata="radiolist3" @change=""></selectCheckbox> -->
								<lxtselects style="margin-left: 20rpx" v-model="facilities" :list="radiolist3"
									valueName="content" multiple keyName="id" @change="facilitieschange"></lxtselects>
								<!-- <u--input inputAlign="right" v-model="model1.userInfo.facilities" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input> -->
								<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
							</view>
						</view>
					</u-form-item>
					<!-- 装修 -->
					<u-form-item labelAlign="right" prop="userInfo.decoration" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								装修
								<span style="color: red">*</span>
							</span>
							<u-radio-group placement="row" v-model="radiovalue2">
								<view style="display: flex; justify-content: end; width: 100%">
									<u-radio activeColor="#fe4f04" :customStyle="{ marginLeft: '15rpx' }"
										v-for="(item, index) in radiolist2" :key="index" :label="item.name"
										:name="item.name" @change="radioChange(item.id, 2)"></u-radio>
								</view>
							</u-radio-group>
						</view>
					</u-form-item>

					<!-- 社区-->
					<u-form-item borderBottom @click="hideKeyboard(2)">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								社区
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="community" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item>
					<!-- 街道-->
					<u-form-item borderBottom @click="hideKeyboard(3)">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								街道
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="street" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item>
					<!-- 名称-->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								名称
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="model1.userInfo.name" disabledColor="#ffffff"
								placeholder="请选择输入" border="none"></u--input>
							<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
						</view>
					</u-form-item>
					<!-- 租金-->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								租金
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="model1.userInfo.rent" disabledColor="#ffffff"
								placeholder="请选择输入" border="none"></u--input>
							<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
						</view>
					</u-form-item>
					<!-- 楼栋地址-->
					<u-form-item prop="userInfo.address" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								楼栋地址
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="model1.userInfo.address" disabledColor="#ffffff"
								placeholder="请输入" border="none"></u--input>
							<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
						</view>
					</u-form-item>
					<!-- 楼层-->
					<u-form-item prop="userInfo.floor" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								楼层
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="model1.userInfo.floor" disabledColor="#ffffff"
								placeholder="请填写楼栋层数" border="none"></u--input>
							<span style="margin-left: 10rpx">层</span>
						</view>
					</u-form-item>
					<!-- 面积-->
					<u-form-item prop="userInfo.area" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">
								面积
								<span style="color: red">*</span>
							</span>
							<u--input inputAlign="right" v-model="model1.userInfo.area" disabledColor="#ffffff"
								placeholder="请填写楼栋面积" border="none"></u--input>
							<span style="margin-left: 10rpx">㎡</span>
						</view>
					</u-form-item>
					<!-- 入住-->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">入住</span>
							<u--input inputAlign="right" v-model="model1.userInfo.check_in" disabledColor="#ffffff"
								placeholder="请选择输入" border="none"></u--input>
							<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
						</view>
					</u-form-item>
					<!-- 户型-->
					<u-form-item borderBottom @click="hideKeyboard(5)">
						<view class="box-flex">
							<span style="margin-right: 10rpx">户型</span>
							<u--input inputAlign="right" v-model="house_type" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item>
					<!-- 朝向-->
					<u-form-item borderBottom @click="towardsfun">
						<view class="box-flex">
							<span style="margin-right: 10rpx">朝向</span>
							<u--input inputAlign="right" v-model="model1.userInfo.face" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item>
					<!-- 类型-->
					<u-form-item borderBottom @click="hideKeyboard(6)">
						<view class="box-flex">
							<span style="margin-right: 10rpx">类型</span>
							<u--input inputAlign="right" v-model="rent_type" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item>
					<!-- 付款方式-->
					<u-form-item borderBottom @click="hideKeyboard(7)">
						<view class="box-flex">
							<span style="margin-right: 10rpx">付款方式</span>
							<u--input inputAlign="right" v-model="payment_type" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
							<span><u-icon slot="right" name="arrow-right"></u-icon></span>
						</view>
					</u-form-item>
					<!-- 押金-->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">押金</span>
							<u--input inputAlign="right" v-model="model1.userInfo.deposit" disabledColor="#ffffff"
								placeholder="请输入" border="none"></u--input>
							<span style="margin-left: 10rpx">元</span>
						</view>
					</u-form-item>
					<!-- 水费-->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">水费</span>
							<u--input inputAlign="right" v-model="model1.userInfo.water_rate" disabledColor="#ffffff"
								placeholder="请输入" border="none"></u--input>
							<span style="margin-left: 10rpx">元/吨</span>
						</view>
					</u-form-item>
					<!-- 电费-->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">电费</span>
							<u--input inputAlign="right" v-model="model1.userInfo.power_rate" disabledColor="#ffffff"
								placeholder="请输入" border="none"></u--input>
							<span style="margin-left: 10rpx">元/度</span>
						</view>
					</u-form-item>
					<!-- 管理费 -->
					<u-form-item borderBottom>
						<view class="box-flex">
							<span style="margin-right: 10rpx">管理费</span>
							<u--input inputAlign="right" v-model="model1.userInfo.manage_rate" disabledColor="#ffffff"
								placeholder="请输入" border="none"></u--input>
							<span style="margin-left: 10rpx">元</span>
						</view>
					</u-form-item>
					<!-- 视频-->
					<u-form-item borderBottom>
						<view class="">
							<span style="margin-right: 10rpx">视频</span>
							<view style="margin-top: 10rpx">
								<u-upload :fileList="fileList2" @afterRead="afterReads" @delete="deletePics" name="1"
									multiple :maxCount="1" accept="video" width="128rpx" height="128rpx">
									<view>
										<image src="../static/images/sp.png" mode="widthFix"
											style="width: 128rpx; height: 128rpx"></image>
									</view>
								</u-upload>
							</view>
						</view>
					</u-form-item>
					<!-- 房源照片-->
					<u-form-item borderBottom>
						<view class="">
							<view style="display: flex; justify-content: space-between">
								<span style="margin-right: 10rpx; color: #666666">
									房源照片
								</span>
								<span style="margin-right: 10rpx; color: #666666">
									{{ fileList.length }}/6
								</span>
							</view>
							<view style="margin-top: 10rpx">
								<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="6" width="128rpx" height="128rpx">
									<view>
										<image src="../static/images/tp.png" mode="widthFix"
											style="width: 128rpx; height: 128rpx"></image>
									</view>
								</u-upload>
							</view>
						</view>
					</u-form-item>
				</u--form>
				<!--  -->
				<u-action-sheet :show="showSex" :round="30" :actions="actions" @close="showSex = false"
					@select="sexSelect($event, type)"></u-action-sheet>
				<!-- 朝向 -->
				<u-popup :show="towards" @close="towards = false">
					<view style="box-sizing: border-box; padding: 15rpx">
						<view class="towardstop">
							<view class="towardstopz" @click="towards = false">取消</view>
							<view class="">朝向</view>
							<view class="towardstopy" @click="towardstopyclicl">确认</view>
						</view>
						<view class="towardsbox" style="height: 400rpx">
							<view :class="towardsListindex == item.id
									? 'towardsboxzboxs'
									: 'towardsboxzbox'
								" v-for="(item, index) in towardsList" @click="towardsListindex = item.id">
								<view class="">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<view class="submitbox" @click="submit">提交</view>
		<!-- <u-button @click="submit" style="margin-bottom: 80rpx;">提交</u-button> -->
	</view>
</template>

<script>
import lxtselects from "./components/lxtselects.vue";
import selectCheckbox from "./components/selectCheckbox.vue";
import {
	houseoption_list,
	houseoption_list2,
	publish,
	houseroom,
	house_modify,
} from "@/api/landlord.js";
export default {
	components: {
		selectCheckbox,
		lxtselects,
	},
	data() {
		return {
			fromdata: null,
			snData: {},
			snID: "",
			towards: false,
			showSex: false,
			fileList: [],
			fileList2: [],
			model1: {
				userInfo: {
					manage_rate: "",
					facilities: "",
					// 房源设施
					address: "",
					// 地址
					floor: "",
					// 楼层
					area: "",
					// 面积
					type: "",
					// 房屋类型
					decoration: "",
					// 装修
					face: "",
					// 朝向
					house_type: "",
					// 户型
					payment_type: "",
					// 付款方式
					rent_type: "",
					// 出租类型
					power_rate: "",
					// 电费
					water_rate: "",
					// 水费
					deposit: "",
					// 押金
					community: "",
					// 社区
					street: "",
					// 街道
					name: "",
					// 姓名
					rent: "",
					// 租金
					check_in: "",
					// 入住
				},
			},
			house_type: "",
			rent_type: "",
			payment_type: "",
			facilities: [],
			community: "",
			street: "",
			rules: {
				"userInfo.type": {
					type: "string",
					required: true,
					message: "请选择类型",
					trigger: ["blur", "change"],
				},
				"userInfo.name": {
					type: "string",
					required: true,
					message: "请输入名称",
					trigger: ["blur", "change"],
				},
				"userInfo.rent": {
					type: "string",
					required: true,
					message: "请输入租金",
					trigger: ["blur", "change"],
				},
				"userInfo.street": {
					type: "string",
					required: true,
					message: "请选择类型",
					trigger: ["blur", "change"],
				},
				"userInfo.community": {
					type: "string",
					required: true,
					message: "请选择社区",
					trigger: ["blur", "change"],
				},
				"userInfo.facilities": {
					type: "string",
					required: true,
					message: "请选择类型",
					trigger: ["blur", "change"],
				},
				"userInfo.decoration": {
					type: "string",
					required: true,
					message: "请选择装修",
					trigger: ["blur", "change"],
				},
				"userInfo.address": {
					type: "string",

					required: true,
					message: "请选择输入地址",
					trigger: ["blur", "change"],
				},
				"userInfo.floor": {
					type: "number",

					required: true,
					message: "请选择输入楼层",
					trigger: ["blur", "change"],
				},
				"userInfo.area": {
					type: "string",

					required: true,
					message: "请选择输入面积",
					trigger: ["blur", "change"],
				},
			},
			type: 0,
			towardsListindex: 0,
			towardsList: [{
				name: "东",
				id: 0,
			},
			{
				name: "南",
				id: 2,
			},
			{
				name: "西",
				id: 3,
			},
			{
				name: "北",
				id: 4,
			},
			{
				name: "东西",
				id: 5,
			},
			{
				name: "南北",
				id: 6,
			},
			{
				name: "东南",
				id: 7,
			},
			{
				name: "西南",
				id: 8,
			},
			{
				name: "东北",
				id: 9,
			},
			{
				name: "西北",
				id: 10,
			},
			],
			radiolist1: [{
				name: "楼栋",
				id: "1",
				disabled: false,
			},
			{
				name: "商铺",
				id: "2",
				disabled: false,
			},
			{
				name: "写字楼",
				id: "3",
				disabled: false,
			},
			],
			radiolist2: [{
				name: "精装修",
				id: "1",
				disabled: false,
			},
			{
				name: "普通装修",
				id: "2",
				disabled: false,
			},
			],
			radiolist3: [],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: "",
			radiovalue2: "",
			actions: [],

			radio: "",
			switchVal: false,
		};
	},

	onLoad(options) {
		this.hideKeyboard(4);

		if (options.data) {
			this.snData = JSON.parse(options.data);
			console.log(this.snData);
			this.model1.userInfo.address = this.snData.address;
			this.model1.userInfo.floor = this.snData.floor;
			this.model1.userInfo.name = this.snData.name;
			this.echo(this.snData);
		}
	},
	methods: {
		echo(e) {
			houseroom({
				room_id: e.id
			}).then((res) => {
				console.log(res.data.data);
				this.fromdata = res.data.data;
				let data = res.data.data;
				if (data) {
					this.getHouseOptionLists();
					// 类型回显
					(this.radiovalue1 = data.type_text),
						(this.model1.userInfo.type = data.type);
					// 设施回显
					let a = this.convertStringToArray(data.facilities);
					this.radiolist3.forEach((i) => {
						a.forEach((j) => {
							if (i.id == j) {
								this.facilities.push(i);
							}
						});
					});
					console.log(666, this.facilities);
					console.log(666, data.facilities);

					this.model1.userInfo.facilities = data.facilities;
					// 装修回显
					this.model1.userInfo.decoration = data.decoration;
					if (data.decoration == 1) {
						this.radiovalue2 = "精装修";
					} else {
						this.radiovalue2 = "普通装修";
					}
					// 社区回显
					this.model1.userInfo.community = data.community;
					// 社区回显
					this.model1.userInfo.street = data.street;
					// 名称回显
					this.model1.userInfo.name = data.name;
					// 租金回显
					this.model1.userInfo.rent = data.rent;
					// 楼栋地址回显
					this.model1.userInfo.address = data.address;
					// 楼层回显
					this.model1.userInfo.floor = data.floor;
					// 楼层回显
					this.model1.userInfo.floor = data.floor;
					// 面积回显
					this.model1.userInfo.area = data.area;
					// 入住回显
					this.model1.userInfo.check_in = data.check_in;
					// 户型回显
					this.model1.userInfo.house_type = data.house_type;
					// 朝向回显
					this.model1.userInfo.face = data.face;
					// 类型回显
					this.model1.userInfo.rent_type = data.rent_type;
					// 类型回显
					this.model1.userInfo.payment_type = data.payment_type;
					// 押金回显
					this.model1.userInfo.deposit = data.deposit;
					// 水费回显
					this.model1.userInfo.water_rate = data.water_rate;
					// 电费回显
					this.model1.userInfo.power_rate = data.power_rate;
					this.model1.userInfo.manage_rate = data.manage_rate;
					data.images.forEach((e) => {
						this.fileList.push({
							url: e,
							urls: e,
						});
					});
					this.fileList2.push({
						type: "video",
						message: "上传成功",
						url: data.video,
						urls: data.video,
					});
				}
			});
		},
		getHouseOptionLists() {
			Promise.all([
				houseoption_list2({
					cid: 2,
				}),
				houseoption_list2({
					cid: 3,
					pid: this.fromdata.community,
				}),
				houseoption_list2({
					cid: 5,
				}),
				houseoption_list2({
					cid: 6,
				}),
				houseoption_list2({
					cid: 7,
				}),
			]).then(([res1, res2, res3, res4, res5]) => {
				// console.log(res1)
				if (res1.data.msg == "success") {
					res1.data.data.forEach((e) => {
						if (e.option_id == this.fromdata.community) {
							this.community = e.option_name;
						}
					});
				}
				if (res2.data.msg == "success") {
					res2.data.data.forEach((e) => {
						if (e.option_id == this.fromdata.street) {
							this.street = e.option_name;
						}
					});
				}
				if (res3.data.msg == "success") {
					res3.data.data.forEach((e) => {
						if (e.option_id == this.fromdata.house_type) {
							this.house_type = e.option_name;
						}
					});
				}
				if (res4.data.msg == "success") {
					res4.data.data.forEach((e) => {
						if (e.option_id == this.fromdata.rent_type) {
							this.rent_type = e.option_name;
						}
					});
				}
				if (res5.data.msg == "success") {
					res5.data.data.forEach((e) => {
						if (e.option_id == this.fromdata.payment_type) {
							this.payment_type = e.option_name;
						}
					});
				}
			});
		},
		convertStringToArray(str) {
			return str.split(",");
		},

		// 多选
		facilitieschange(e) {
			console.log(444, this.facilities);

			if (this.facilities.length > 0) {
				let list = [];
				this.facilities.forEach((k) => {
					list.push(k.id);
				});
				this.model1.userInfo.facilities = list.join(",");
			}
			console.log(this.model1.userInfo.facilities);

			// this.$refs.uForm.validateField('userInfo.facilities')
		},
		// 朝向
		towardstopyclicl() {
			console.log(this.towardsListindex);
			this.towardsList.forEach((e) => {
				if (e.id == this.towardsListindex) {
					this.model1.userInfo.face = e.name;
				}
			});
			this.towards = false;
		},
		// 单选
		radioChange(e, k) {
			if (k == 1) {
				this.model1.userInfo.type = e;
			} else if (k == 2) {
				this.model1.userInfo.decoration = e;
			}
		},
		// 菜单选择
		hideKeyboard(e) {
			if (e == 4) {
				houseoption_list2({
					cid: e
				}).then((res) => {
					console.log(res.data.data);
					let list = [];
					res.data.data.forEach((e) => {
						list.push({
							id: e.option_id,
							content: e.option_name,
						});
					});
					this.radiolist3 = list;
				});
			} else if (e == 3) {
				console.log();
				if (this.model1.userInfo.community == "") {
					uni.$u.toast("请选择社区");
					return;
				}
				this.type = e;
				houseoption_list2({
					cid: e,
					pid: this.model1.userInfo.community
				}).then(
					(res) => {
						console.log(res.data.data);
						let list = [];
						res.data.data.forEach((e) => {
							list.push({
								id: e.option_id,
								name: e.option_name,
							});
						});
						this.actions = list;
						this.showSex = true;
					}
				);
			} else {
				this.init(e);
			}
		},
		init(e) {
			this.type = e;
			houseoption_list2({
				cid: e
			}).then((res) => {
				console.log(res.data.data);
				let list = [];
				res.data.data.forEach((e) => {
					list.push({
						id: e.option_id,
						name: e.option_name,
					});
				});
				this.actions = list;
				this.showSex = true;
			});
		},
		towardsfun() {
			console.log(5555);
			this.towards = true;
		},
		sexSelect(e, type) {
			if (type == 5) {
				this.house_type = e.name;
				this.model1.userInfo.house_type = e.id;
			} else if (type == 6) {
				this.rent_type = e.name;
				this.model1.userInfo.rent_type = e.id;
			} else if (type == 7) {
				this.payment_type = e.name;
				this.model1.userInfo.payment_type = e.id;
			} else if (type == 2) {
				this.community = e.name;
				this.model1.userInfo.community = e.id;
				this.street = "";
				this.model1.userInfo.street = "";
			} else if (type == 3) {
				this.street = e.name;
				this.model1.userInfo.street = e.id;
			}
			// this.model1.userInfo.sex = e.name
			// this.$refs.uForm.validateField('userInfo.sex')
		},
		submit() {
			console.log(3333);

			this.$refs.uForm
				.validate()
				.then((res) => {
					let data = {
						room_id: this.snData.id,
						video: "",
						images: [],
						...this.model1.userInfo,
					};
					if (this.fileList2.length) {
						data.video = this.fileList2[0].urls;
					}
					if (this.fileList.length) {
						this.fileList.forEach((e) => {
							data.images.push(e.urls);
						});
					}
					if (this.fromdata) {
						// 修改拦截
						house_modify(data).then((res) => {
							uni.$u.toast(res.data.msg);
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1000);
						});
						return;
					}
					publish(data).then((res) => {
						uni.$u.toast(res.data.msg);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 1500);
					});
				})
				.catch((errors) => {
					uni.$u.toast("校验失败");
				});
		},
		// 删除
		deletePic(e) {
			this["fileList"].splice(0, 1);
		},
		deletePics(e) {
			this["fileList2"].splice(0, 1);
		},
		// 回显上传本地图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				this["fileList"].push({
					...lists[i],
					//提示上传中
					status: "success",
					message: "上传成功",
					urls: result.url,
				});
			}
		},
		async afterReads(event) {
			const item = event.file[0];
			// 获取本地读取文件路径
			const url = item.url;
			//result为上传成功的响应数据
			let result = await this.uploadFilePromise(url);
			console.log(result);
			this["fileList2"].push({
				...item,
				//提示上传中
				status: "success",
				message: "上传成功",
				urls: result.url,
			});
			console.log(this["fileList2"]);
		},
		// 上传图片
		uploadFilePromise(url) {
			// token
			const token = uni.getStorageSync("userInfo").token;
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					// 完整上传路径 H5端需要解决跨域问题
					url: `${this.$Config.HTTP_REQUEST_URL}/api/common/upload`,
					// 本地上传读取到的url
					filePath: url,
					name: "file",
					// 请求头
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						token: token,
					},
					// 附加表单对象
					formData: {
						user: "test",
					},
					success: (res) => {
						// 这里res是普通对象，但是res.data为JSON字符串，需要转一下
						const result = JSON.parse(res.data);
						resolve(result.data);
					},
				});
			});
		},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
};
</script>

<style lang="scss" scoped>
page {
	background: #f5f5f5;
}

.towardsbox {
	width: 100%;
	// border: 1rpx solid red;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

	.towardsboxzbox {
		width: 30%;
		display: flex;
		border-radius: 40rpx;

		background-color: #f5f6fa;
		justify-content: center;
		height: 80rpx;
		align-items: center;
	}

	.towardsboxzboxs {
		width: 30%;
		display: flex;
		border-radius: 40rpx;
		border: 1rpx solid #ffa279;
		background-color: #fff6ed;
		color: #ffa279;
		justify-content: center;
		height: 80rpx;
		align-items: center;
	}
}

.towardstop {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40rpx;

	.towardstopz {
		color: #aeaeae;
	}

	.towardstopy {
		color: #fe6a2a;
	}
}

.submitbox {
	width: 100%;
	margin: 0 auto;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	color: #fff;
	background-color: #fe4f04;
}

.box-flex {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.comment-box {
	box-sizing: border-box;
	padding: 15rpx;
}

.cord {
	margin: 30rpx 0;
	box-sizing: border-box;
	padding: 15rpx 30rpx;
	background: #fff;
	border-radius: 15rpx;
}
</style>